<script setup>
/**
 * & 文件引入区域
 */

import { reactive, ref, watch } from "vue";
import { useIndexStore } from "@/stores/indexStore";
import router from "@/router";
import { useI18n } from "vue-i18n";

/**
 * & 注册区
 */

/**
 * & 变量声明区
 */
let actions = reactive([]); // 选择列表
const { t } = useI18n();

let point = ref("");
let currency = ref("");

useIndexStore().ForexList.forEach((item) =>
  actions.push({
    text: item.format,
    exchangeRate: item.conversionRate,
  })
);

let currencyType = ref(0); // 默认显示第一个货币

/**
 * & 函数区
 */
///跳转到exchange
const gotoExchange = () =>{
  router.push("/exchange")
}

const onSelect = (action, index) => {
  if (currencyType.value != index) {
    currencyType.value = index;
    inputKeyup("point");
  }
};

// 输入框事件
const inputKeyup = (type) => {
  if (type == "point") {
    let newVl = point.value * actions[currencyType.value].exchangeRate;

    newVl.toString().length >= 7
      ? (currency.value = newVl.toFixed(10))
      : (currency.value = newVl);
  } else if (type == "currency") {
    let newVl = currency.value / actions[currencyType.value].exchangeRate;

    newVl.toString().length >= 11
      ? (point.value = newVl.toFixed(10))
      : (point.value = newVl);
  }

  currency.value === "" ? (point.value = "") : "";
  point.value === "" ? (currency.value = "") : "";
};
</script>

<template>
  <div class="conversion_rate">
    <div class="point item">
      <div class="label">eCNY:</div>
      <input @keyup="inputKeyup('point')" type="text" v-model="point" />
    </div>

    <!-- <img src="/images/Me/returnLogo.png" alt="" class="reverse" /> -->

    <div class="currency item">
      <van-popover :actions="actions" @select="onSelect">
        <template #reference>
          <div class="label">
            {{ actions[currencyType].text }}<van-icon name="arrow-down" />
          </div>
        </template>
      </van-popover>

      <input @keyup="inputKeyup('currency')" type="text" v-model="currency" />

    
      </div>
      <div class="exchange"> 
        <van-button @click="gotoExchange">{{ $t("me.recharge.exchange")}}</van-button>
      </div>
  </div>
</template>

<style lang="scss" scoped>
.conversion_rate {
  //   display: flex;
  width: max-content;
  border-radius: 10rem;

  
  >.item {
    display: flex;
    align-items: center;

    font-size: 14rem;
    padding: 8rem 0;

    .label {
      width: 60rem;
      padding: 0 5rem;

    }

    >input {
      padding: 5rem 10rem;
      width: 80rem;

      border-bottom: 1rem solid #e0e0e0;
    }
  }

  >.reverse {
    width: 50rem;
  }

  .exchange{
    text-align: center;
    margin-top: 10px;
  }
}
</style>
